<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
  </style>
</head>

<body>
  <div id="box">
    <p>不凡学院</p>
  </div>
  <button> append添加 </button>
  <button> 指定位置添加 </button>
  <button> 删除元素</button>
  <button>克隆元素</button>
</body>

<script>
  //元素的增加
  //1 先通过js创建元素
  // document.createElement() 
  var img = document.createElement('img');
  var box = document.getElementById('box');
  var button = document.querySelectorAll('button');
  var pEle = document.querySelector('p');
  console.log(img);
  img.src = 'a.jpg';
  //2 添加生成的标签到指定元素
  // 指定元素.appendChild(要添加的元素) ,添加到指定元素末尾 

  button[0].onclick = function () {
    box.appendChild(img);
  }
  //指定位置添加 
  // insertBefefore('要添加的元素','参考元素') 可以指定位置添加
  button[1].onclick = function () {

    box.insertBefore(img, pEle)
  }
  //注意  生成的标签 只能添加一次  多次添加类似于剪切效果

  //删除元素
  // 指定元素.removeChild('被删除的元素'); 既可以删除原有的元素 还可以删除新增的元素
  button[2].onclick =function(){ 
    
    // box.removeChild(img);
    pEle.remove();
  }

  //复制  (克隆)
  // 要克隆的元素.cloneNode()
  button[3].onclick = function(){
    console.log(box.cloneNode(true)); //默认浅克隆 默认值 false  只获取表面结构, 深克隆 为true;
  }
</script>

</html>